<template>
	<div>

		<headerVue :HeadIndex="1"></headerVue>
		<div class="index-banner">
			<!-- 轮播图 -->
			<swiperVue :data="indexGetData.swiper"></swiperVue>
			<!-- 报名 -->
			<fromVue></fromVue>
		</div>
		<!-- 关于我们 -->
		<HomeAbout></HomeAbout>
		<!-- 案例推荐 -->
		<RecommendSwiper :data="indexGetData.cases"></RecommendSwiper>
		<!-- 新闻资讯 -->
		<NewsCenter :data="indexGetData.news"></NewsCenter>
		<!-- 服务说明 -->
		<HomeServe></HomeServe>
		<!-- 底部 -->
		<footerVue></footerVue>
	</div>
</template>

<script setup>
import swiperVue from './swiper.vue';
import fromVue from './from.vue';
import RecommendSwiper from './RecommendSwiper.vue';
import NewsCenter from './NewsCenter.vue';
import HomeServe from './HomeServe.vue';
import HomeAbout from './HomeAbout.vue';
import headerVue from '../../components/header.vue';
import footerVue from '../../components/footer.vue';

import { indexGetDataApi } from '@/api/index.js'
import { onMounted, ref, reactive } from 'vue';

const indexGetData = ref([])


onMounted(async () => {
	try {
		const res = await indexGetDataApi();
		indexGetData.value = res.data
	} catch (error) {
		console.log(error)
	}
})


</script>

<style scoped lang="less">
.index-banner {
	width: 100%;
	height: 650px;
	background-color: #f2f2f2;
	position: relative;
}
</style>